<template>
  <div class="bbx-normal-page-content" v-loading="pageLoading">
    <div v-if="serviceStationEnabled" ref="eventOrderPageRef" class="event-list common-list-container__v2">
      <div ref="tableHeaderContainer" class="filter-wrapper bg-w">
        <form onsubmit="return false;">
          <div class="searh-input-box">
            <!-- 输入框搜索/重置 -->
            <div class="base-search-group input-with-append-search mar-r-24">
              <el-input v-model="searchParams.keyword" :placeholder="$t('event.eventOrderList.text3')" class="search-input task-mr12">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                <el-button 
                  type="primary"
                  slot="append"
                  @click="searchParams.pageNum = 1; search();"
                  native-type="submit"
                  v-track="$track.formatParams('KEYWORD_SEARCH')">
                  {{$t('common.base.search')}}
                </el-button>
              </el-input>
              <el-button type="plain-third" @click="resetParams" v-track="$track.formatParams('RESET_SEARCH')">{{$t('common.base.reset')}}</el-button>
            </div>
            <!-- 高级搜索 -->
            <div class="advanced-search-btn pointer" @click.self.stop="panelSearchAdvancedToggle">
              <i class="iconfont icon-filter"></i>
              {{$t('common.base.advancedSearch')}}
            </div>
          </div>
        </form>
        <!-- 条件筛选 -->
        <div v-show="packUp" class="filter-tab-box filter-tab">
          <div class="filter-tab__item" v-for="(item, index) in filterConfig" :key="index">
            <div class="filter-tab__label">{{ item.label }}：</div>
            <div class="filter-tab__content">
              <div class="content-item" v-for="(cItem, cIndex) in item.content" :key="cIndex" @click="handleFilterClick(item, cItem)">
                <!-- 异常事件 -->
                <el-tooltip
                  v-if="cItem.value == 'exception' && abnormalText"
                  :content="`${abnormalText}`"
                  placement="top"
                >
                  <span
                    :class="['content-item-label', {'actived': cItem.active === true}, 'task-cef']"
                    :title="cItem.label">
                    {{ cItem.label }} {{cItem.count ? `(${cItem.count})` : item.name === 'state' ? '(0)' : ''}}
                  </span>
                </el-tooltip>
                <!-- 异常事件 -->
                <span v-else :class="['content-item-label',{'task-cef': cItem.value == 'exception'},{'actived': cItem.active === true}]" :title="cItem.label">
                  {{ cItem.label }} {{cItem.count ? `(${cItem.count})` : item.name === 'state' ? '(0)' : ''}}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bbx-normal-pack-up">
          <div @click="changePackUp()">
            <i class="iconfont icon-Icon_up" v-show="packUp"></i>
            <i class="iconfont icon-more" v-show="!packUp"></i>
          </div>
        </div>
      <div class="common-list-view__v2">
        <div ref="tableDoContainer" class="operate-box">
          <div class="operate-box__left">
            <!-- 批量编辑 -->
            <el-button type="plain-third" v-if="editAll" class="cur-point" @click="handleAllotEdit" v-track="$track.formatParams('BATCH_EDIT')">
              <i class="iconfont icon-edit-square task-font14"></i>
              {{$t('common.base.bulkEdit')}}
            </el-button>
            <!-- 删除 -->
            <el-button type="plain-third" v-if="CASE_DELETE && editAll" class="cur-point ml_12" @click="handleDelete" v-track="$track.formatParams('DELETE')">
              <i class="iconfont icon-delete task-font14"></i>
              {{$t('common.base.delete')}}
            </el-button>
          </div>
          <div class="operate-box__right action-button-group">
            <el-tooltip v-if="searchParams.state === 'created'" :content="$t('event.eventOrderList.text4')">
              <i
                class="iconfont icon-ding-yue ml_12 pointer task-icon"
                :class="hasSub ? 'actived' : ''"
                @click="toggleEventSubscribe">
                {{ hasSub ? $t('common.base.subscribed'): $t('common.base.notSubscribed')}}
              </i>
            </el-tooltip>
            <!-- 更多操作 -->
            <el-dropdown v-if="exportIn || editAll">
              <div class="cur-point">
                <span>{{$t('common.base.moreOperator')}}</span>
                <i class="iconfont icon-fdn-select"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="isButtonDisplayed && allowExport">
                  <div @click="handleExport(false)" v-track="$track.formatParams('EXPORT', null, 'MORE_ACTIONS')">{{$t('common.base.export')}}</div>
                </el-dropdown-item>
                
                <el-dropdown-item v-if="isButtonDisplayed && allowExport">
                  <div @click="handleExport(true)" v-track="$track.formatParams('EXPORT_ALL', null, 'MORE_ACTIONS')">{{$t('common.base.exportAll')}}</div>
                </el-dropdown-item>
                <el-dropdown-item v-if="editAll">
                  <div @click="handleEventReAllot" v-track="$track.formatParams('EVENT_RE_ALLOT', null, 'MORE_ACTIONS')">{{$t('event.eventOrderList.text2')}}</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <!-- 选择列 -->
            <div class="guide-box">
              <div :class="['task-pointer', 'cur-point']" @click="showAdvancedSetting" v-track="$track.formatParams('SELECT_COLUMN')">
                <span>{{$t('common.base.choiceCol')}}</span>
                <i class="iconfont icon-fdn-select"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- <div ref="BaseSelectionBarComponent" v-show="multipleSelection.length" class="common-list-selection__v2 mt_8">
          已选择
          <span>{{ multipleSelection.length }}</span>条
          <span class="pointer" @click="toggleClearSelection">清空</span>
        </div> -->
        
        <!-- 表格 -->
        <el-table
          v-if="columns.length"
          ref="table"
          class="mt_8 bbx-normal-list-box"
          stripe
          :key="tableKey"
          :row-key="getRowKey"
          :data="tableData"
          :highlight-current-row="false"
          :border="true"
          @select="handleSelection"
          @select-all="handleSelection"
          @sort-change="sortChange"
          @header-dragend="headerDragend"
          v-loading="loading"
          header-row-class-name="common-list-table-header__v2"
          :height="tableContainerHeight"
        >
          <template slot="empty">
            <BaseListForNoData v-show="!loading" :notice-msg="$t('common.base.tip.noData')"></BaseListForNoData>
          </template>
          <el-table-column
            type="selection"
            width="48"
            align="center"
            class-name="select-column"
            :reserve-selection="true"
          ></el-table-column>
          <template v-for="column in columns">
            <el-table-column
                v-if="column && column.show"
                :show-overflow-tooltip="getCommonListShowTooltip(column)"
                :align="column.align"
                :key="column.field"
                :label="column.displayName"
                :min-width="column.minWidth"
                :prop="column.field"
                :sortable="column.sortable"
                :width="column.width"
                :resizable="true"
                :fixed="column.fixLeft || false"
              >
                <template slot-scope="scope">
                  <template v-if="column.renderCell">
                    <base-table-cell :render-cell="column.renderCell" :column="column" :row="scope.row"></base-table-cell>
                  </template>

                <template v-else-if="column.formType === 'relationCustomer' && scope.row.attribute[column.field]">
                  <template v-if="isOpenData && column.setting && (column.setting.formType === 'user' || column.setting.fieldName === 'customerManager')">
                    <open-data v-for="staffId in getUserIds(scope.row.attribute[column.field])" :key="staffId" type="userName" :openid="staffId"></open-data>
                  </template>
                  <template v-else>
                    {{ getUserName(scope.row.attribute[column.field]) }}
                  </template>
                </template>
                <template v-else-if="column.formType === 'user' && scope.row.attribute[column.field]">
                  <template v-if="isOpenData">
                    <open-data v-for="staffId in getUserIds(scope.row.attribute[column.field])" :key="staffId" type="userName" :openid="staffId"></open-data>
                  </template>
                  <template v-else>
                    {{ getUserName(scope.row.attribute[column.field]) }}
                  </template>
                </template>
              
              <template v-else-if="column.formType === 'logistics'">
                <biz-list-logistics-no
                  :row="scope.row"
                  :column="column"
                  :is-link="isCanLogisticsNoLink(column)"
                  mode="event"
                  :biz-id="scope.row.id"
                />
              </template>

                  <template v-else>
                    {{ $formatFormField(column, scope.row) }}
                  </template>
                </template>
            </el-table-column>
          </template>
        </el-table>
        
        <!-- 分页信息 -->
        <div ref="tableFooterContainer" class="table-footer bbx-normal-table-footer-12 pad-b-16 bg-w pad-t-16">
          <div class="list-info" >
            <i18n path="common.base.table.totalCount">
              <span place="count" class="level-padding">{{ eventPage.total || 0 }}</span>
            </i18n>
            <template v-if="multipleSelection&&multipleSelection.length>0">
              <i18n path="common.base.table.selectedNth">
                <span
                  place="count"
                  class="color-primary pad-l-5 pad-r-5"
                >{{ multipleSelection.length }}</span>
              </i18n>
              <span class="color-primary cur-point" @click="toggleClearSelection">{{$t('common.base.clear')}}</span>
            </template>
          </div>
          <el-pagination
            background
            hide-on-single-page
            :page-sizes="defaultTableData.defaultPageSizes"
            @current-change="jump"
            @size-change="handleSizeChange"
            :page-size="searchParams.pageSize"
            :current-page="searchParams.pageNum"
            layout="prev, pager, next, sizes, jumper"
            :total="eventPage.total"
          >
          </el-pagination>
        </div>

        <!-- 高级搜索框 -->
        <base-search-drawer
          :show.sync="visible"
          :storage-key="advancedColumnNumStorageKey"
          @reset="resetParams"
          @search="search"
          @changeWidth="setAdvanceSearchColumn"
          @getColumnNum="setAdvanceSearchColumn"
        >
          <base-search-panel ref="searchPanel" :column-num="columnNum" :fields="advanceSearchColumn"/>
        </base-search-drawer>

        <!-- 批量编辑 -->
        <event-batch-edit-dialog
          ref="eventBatchEditDialog"
          :config="{
            fields: batchEditEventTemplateFields,
            currentEventType: currentEventType,
            type: 'order'
          }"
          :selected-ids="selectedIds"
          @update="updateEdit"
        ></event-batch-edit-dialog>

        <!-- 导出工单 -->
        <base-export-group
          ref="exportPanel"
          :alert="exportAlert"
          :columns="exportColumnList"
          :build-params="buildExportParams"
          :group="true"
          :validate="checkExportCount"
          method="post"
          :action="eventListExport"
        />

        <!-- 选择列 --> 
        <biz-select-column ref="advanced" @save="saveColumnStatus" />

        <!-- 事件转发弹窗 -->
        <event-batch-reallot-dialog ref="eventBatchReAllotDialog" :event-id-list="selectedIds"></event-batch-reallot-dialog>
      </div>
    </div>
  </div>
</template>

<script>
// pageDes 服务订单列表
import * as EventApi from '@src/api/EventApi.js';
import { checkButtonDisplayed, getRootWindow } from '@src/util/dom';
import AuthUtil from '@src/util/auth';

import Page from '@model/Page';
import {getColumnFields, getAdvancedFields, getFilterConfig, getExceptionFields, getExportSystemInfo} from './fields';

import BaseSearchDrawer from 'packages/BaseSearchDrawer';
import BaseSearchPanel from 'packages/BaseSearchPanel';
import BaseTableCell from 'packages/BaseTableCell';
import EventBatchReAllotDialog from '../components/EventBatchReAllotDialog';
import EventBatchEditDialog from '../components/EventBatchEditDialog.vue';

import formatColumn from 'packages/BaseTableCell/formatColumn';
import { storageGet, storageSet } from "@src/util/storage";
import { sessionStorageGet, sessionStorageRemove } from '@src/util/storageV2';
import { pageEventOrderList } from 'pub-bbx-global/pageType/dist'
import _ from "lodash";
import { safeNewDate } from '@src/util/time';
/* enum */
import StorageKeyEnum from '@model/enum/StorageKeyEnum.ts'

/* export & import */
import { eventListExport } from '@src/api/Export';
// import { eventListImport_1, eventListImportTem_1 } from '@src/api/Import';

/* service */
import { smoothLogisticsField } from '@service/LogisticsService'
import { getFieldWithFieldName } from '@service/FieldService'
import { EventFieldNameMappingEnum } from '@model/enum/FieldMappingEnum'
/* mixin */
import LogisticsMixin from '@src/mixins/logisticsMixin'

/* util */
import { defaultTableData } from '@src/util/table'
import { getRootWindowInitData } from '@src/util/window'
import { randomString, formatDate, useFormTimezone } from 'pub-bbx-utils'
const { disposeFormListViewTime } = useFormTimezone()

const EVENT_LIST_KEY = 'event_order_list';
const EVENT_ORDER_PAGE_SIZE_KEY = 'event_order_page_size';
const MAXCHECK = 500

      

export default {
  components: {
    [BaseSearchDrawer.name]: BaseSearchDrawer,
    [BaseSearchPanel.name]: BaseSearchPanel,
    [BaseTableCell.name]: BaseTableCell,
    [EventBatchReAllotDialog.name]: EventBatchReAllotDialog,
    [EventBatchEditDialog.name]: EventBatchEditDialog,
  },
  mixins: [LogisticsMixin],
  data() {
    return{
      defaultTableData,
      isButtonDisplayed: checkButtonDisplayed(),
      initData: {},
      auth: {},
      searchParams: {
        keyword: '',
        pageSize: 10,
        pageNum: 1,
        orderDetail: {}
      },
      tableKey: Math.random() * 1000 >> 2,
      filterConfig: [],
      abnormalText: '', // 异常节点
      extraAdvanceFields: [],
      eventTemplateFields: [], // 事件类型字段
      eventTemplateReceiptFields: [], // 事件类型回执字段
      currentEventType: {},
      multipleSelection: [],

      eventPage: new Page(),
      visible: false,
      columns: [],
      columnNum: 1,

      exportColumnList:[],

      loading: false,
      hasSub: 1,
      advancedColumnNumStorageKey: StorageKeyEnum.EventOrderListAdvancedColumnNum,
      eventListExport,
      satisfactionFields:[],
      pageLoading:false,
      tableContainerHeight:'440px',
      packUp:true
    }
  },
  computed: {
    tableData() {
      return disposeFormListViewTime(this.eventPage.list, this.columns)
    },
    // 高级搜索字段
    advanceSearchColumn() {
      return [
        ...getAdvancedFields(this),
        ...this.extraAdvanceFields
      ].filter(item => 
        item.isSearch && item.isSearch == 1 && item.show !== false
      );
    },

    // 当前选中的工单ids
    selectedIds() {
      return this.multipleSelection.map((p) => p.id);
    },

    /** 事件类型过滤后的字段 */
    eventTypeFilterFields() {
      let fields = this.eventTemplateFields.concat(this.eventTemplateReceiptFields) || [];
      let eventTypeFilterFields = fields.filter((field) => {
        return (
          ['attachment', 'autograph'].indexOf(field.formType) == -1
          && field.isSystem == 0
        )
      });
      return eventTypeFilterFields;
    },

    /** 事件列表字段 */
    eventListFields() {
      let columnFields = getColumnFields(this)
      
      // 如果开启客户满意度过滤掉满意度、服务标签、客户评价
      if(this.customerSatisfaction) {
        columnFields = columnFields.filter(f=>{
          return f.fieldName != 'tagEvaluates' && f.fieldName != 'eventSuggestion' && f.fieldName != 'eventDegree';
        })
      }
      return []
        .concat(columnFields)
        .filter((f) => f.formType !== 'separator' && f.formType !== 'info')
        .sort((a, b) => a.orderId - b.orderId);
    },
    editAll() {
      return this.initData.editAll || false
    },
    exportIn() {
      return this.allowExport || this.allowImport
    },
    allowExport() {
      return Boolean(this.initData?.export)
    },
    allowImport() {
      return Boolean(this.initData?.import)
    },
    serviceStationEnabled() {
      return this.initData.serviceStationEnabled || false
    },
    CASE_DELETE() {
      return AuthUtil.hasAuth(this.auth, 'SERVICE_ORDER_DELETE')
    },
    allowEventViewDetail() {
      return AuthUtil.hasAuth(this.auth, 'SERVICE_ORDER_VIEW_DETAIL')
    },
    customerField() {
      return getFieldWithFieldName(this.eventTemplateFields || [], EventFieldNameMappingEnum.Customer)
    },
    batchEditEventTemplateFields() {
      return this.eventTemplateFields.filter(field => field.formType !== 'logistics');
    },
    // 灰度满意度方案
    customerSatisfaction() {
      return getRootWindowInitData()?.customerSatisfaction || false; 
    }
  },

  async mounted() {
    this.getAuthByRootInitData()
    // 获取缓存的pagesize
    const localStorageData = await this.getLocalStorageData();
    this.searchParams.pageSize = localStorageData[EVENT_ORDER_PAGE_SIZE_KEY] || 10;
    this.filterConfig = getFilterConfig() // 事件状态/创建视角/创建工单等筛选配置的初始化
    this.getAbnormalText() // 获取异常节点
    this.initialize() // 获取初始化数据
    this.search()

    // 对外开放刷新方法，用于其他tab刷新本tab数据
    window.__exports__refresh = this.refreshPage
    let that_ = this;
    // 监听切换后需要重新计算列表高度 后续可以用activated生命周期替换
    window.addEventListener('message', (event)=> {
      const {action, data} = event.data;
      if (action == 'shb.frame.fasterPage'){
        const {data:parseData, type} = data;
        if(type == `bbx-faster-${pageEventOrderList.type}`){
          this.findFastPageData(parseData);
        }
      }else if (action == 'shb.frame.activatedPage'){
        that_.$nextTick(()=> {
          that_.knowTableContainerHeight();
        })
      }
    });
  },
  methods: {
    /**
     * @description: 获取事件满意表单字段
     */    
    async getSatisfactionFields() {
      try {
        await EventApi.satisfactionFields({templateId:this.currentEventType?.id || ''}).then(res => {
          const { code, result} = res;
          if(code == 0) {
            result.forEach((field) => {
              field.group = 'event';
              field.label = field.displayName;
              field.field = field.fieldName;
            });
            this.satisfactionFields = res.result || [];
          }
        });
      } catch (error) {
        console.log(error)
        
      }

    },
    // 获取window._init auth
    getAuthByRootInitData() {
      const rootWindow = getRootWindow(window)
      const _initData = JSON.parse(rootWindow?._init || '{}')
      this.auth = _initData?.user?.auth || {}
    },
    // 处理人员显示
    getUserName(value) {
      // 多选
      if(Array.isArray(value)) {
        return value.map(i => i.displayName || i.name).join(",");
      }

      let user = value || {};
      return user.displayName || user.name;
    },
    getUserIds (value) {
      // 多选
      if (Array.isArray(value)) {
        return value.map((i) => i.staffId);
      }

      let user = value || {};
      return [user.staffId];
    },
    // 获取服务事件列表
    queryEventPageList(params = {}) {
      const query = { "isOrderList" : true }
      this.loading = true
      EventApi.queryEventPageList(query, params)
        .then(res => {
          if(res.succ && res.status == 0) {
            this.eventPage = res.data || []
          }
        })
        .catch(err => { console.error(err) })
        .finally(()=>{ this.loading = false })
    },

    // 初始化处理事件状态--拼接对应状态的数量
    initEventStatusField(stateCount) {
      const totalValueArr = Object.values(stateCount)
      const totalCount = totalValueArr.reduce((tole, value) => {
          return tole + value;
      });
      const { finished=0,  allFinished=0, convert2Task=0 } = stateCount
      stateCount.allFinished = finished + allFinished + convert2Task
      
      this.filterConfig[0].content.forEach((item, index) => {
        if(stateCount[item.value]) {
          item.count = item.value ? stateCount[item.value] : 0
        } else {
          if(item.value === 'all') {
            item.count = totalCount - stateCount['exception'] // 全部事件总和需去掉异常事件
          }
        }
      })
    },
    getAbnormalText() {
      try {
        const abnormalData = []
        getExceptionFields()[0] && (getExceptionFields()[0].content || []).forEach(item => {
          if(item.label !== this.$t('common.base.all')) abnormalData.push(item.label)
        })
        this.abnormalText = abnormalData.toString()
      } catch (error) {
        console.error(error)
      }
    },

    // 搜索
    search() {
      const searchParams = this.buildSearchParams()
      this.visible = false;
      this.queryEventPageList(searchParams)
    },

    // 构建搜索参数
    buildSearchParams() {
      let advancedSearchParams = this.$refs.searchPanel ? this.$refs.searchPanel.buildParams() : {};
      const {customerId, tlmId, productId} = advancedSearchParams;
      
      return {
        ...this.searchParams,
        ...advancedSearchParams,
        cusId: customerId || '',
        lmId: tlmId || '',
        productId: productId || '',
      }
    },

    // 重置
    resetParams() {
      window.location.reload()
    },

    // 高级搜索
    panelSearchAdvancedToggle() {
      this.visible = true;
    },

    /**
     * @description: 筛选项点击事件
     * @param {String} parent 父节点信息
     * @param {String} current 当前筛选数据
     */
    handleFilterClick(parent, current, searchNow = true) {
			this.$track.clickStat(this.$track.formatParams('QUICK_SEARCH', parent.label));
      
      return new Promise((resolve, reject)=>{
        parent.content.forEach(item => {
          item.active = false
          if(item.value === current.value) {
            item.active = true
          }
        });
        const currentValue = current.value == 'all' ? '' : current.value

        // 异常事件 插入异常筛选项
        if(parent.name === 'state') {
          if (currentValue === 'exception') {
            this.filterConfig = [...this.filterConfig, ...getExceptionFields()]
          } else {
            this.filterConfig = this.filterConfig.filter(item => {
              return item.name !== 'exceptionType'
            })
          }
        }
        
        this.searchParams[parent.name] = currentValue
        resolve();
        if(searchNow){
          this.resetSearch()
        }
      })
    },
    resetSearch(){
      this.searchParams.pageNum = 1;
      this.search()
    },
    //  批量编辑
    handleAllotEdit() {
      if (!this.selectedIds.length) {
        this.$message({
          message: this.$t('event.eventOrderList.text5'),
          type: 'warning'
        });
        return;
      }
      this.$refs.eventBatchEditDialog.open();
    },

    // 保存编辑
    updateEdit() {
      this.search()
    },

    // 删除
    async handleDelete() {
      const { selectedIds } = this;
      if (!selectedIds.length) {
        this.$message({
          message: this.$t('event.eventOrderList.text6'),
          type: 'warning'
        });
        return;
      }

      this.$confirm(this.$t('event.eventOrderList.text7'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      })
        .then(async () => {
          const { succ } = await EventApi.eventDelete(selectedIds);
          if (succ) {
            this.$message({
              message: this.$t('common.base.deleteSuccess'),
              type: 'success'
            });
            this.toggleClearSelection()
            this.refreshPage()
          }
        })
        .catch(() => { });
    },

    /**
     * @description: 导出（全部）
     * @param {Boolean} isExportAll 是否导出全部
     */
    async handleExport(isExportAll) {
      let ids = [];
      let fileName = formatDate(safeNewDate(), 'YYYY-MM-DD') + this.$t('event.eventOrderList.text12') + '.xlsx';
      if (!isExportAll) {
        if (!this.multipleSelection.length) {
          this.$message({
            message: this.$t('common.base.tip.exportNoChoice'),
            type: 'warning'
          });
          return
        };
        ids = this.selectedIds;
      }

      const ExportPanelComponent = this.$refs.exportPanel
      if (!ExportPanelComponent) {
        return console.warn('Caused: $refs.exportPanel is Empty')
      }

      const LocalStorageData = await this.getLocalStorageData()
      let exportCheckedData = LocalStorageData.exportCheckedData

      if (!exportCheckedData) {
        exportCheckedData = {
          checkedGroup: [],
          checkedMap: {},
          isCheckedAll: false,
          tooltip: true
        }
      }

      ExportPanelComponent.open(ids, fileName, false, exportCheckedData)
    },

    // 事件转发
    handleEventReAllot() {
      const { selectedIds } = this;
      if (!selectedIds.length) {
        this.$message({
          message: this.$t('event.eventOrderList.text8'),
          type: 'warning'
        });
        return;
      }
      this.$refs.eventBatchReAllotDialog.open()
    },

    async initialize(isEventStatus) {
      // 清除导出配置的缓存
      localStorage.removeItem('checkedMap')
      localStorage.removeItem('checkedGroupArr')
      localStorage.removeItem('isCheckedAll')

      const query = { "isOrderList" : true }
      const params = { "pageSize" : 10 }
      this.pageLoading = true;

      await EventApi.queryEventPageInfo(query, params)
        .then(async res => {
          if(res.status == 0 && res.succ) {
            const { allEventFields=[], evaluateConfig={}, cardDetailList=[], currentType={}, stateCount=[], eventAllotHasSub} = res.data
            
            if(!isEventStatus) {
              this.initData = res.data
              if(!this.initData.serviceStationEnabled) {
                this.$message.error(this.$t('event.eventOrderList.text9'));
                return
              }
              this.currentEventType = currentType // 事件类型-服务订单
              this.hasSub = Number(eventAllotHasSub) // 是否订阅
              this.initEventStatusField(stateCount) // 处理事件状态对应数量
            }

            if(this.customerSatisfaction) {
              await this.getSatisfactionFields();
            }
            
            let originAllFields = _.cloneDeep(allEventFields)
            let newAllEventFields = smoothLogisticsField(allEventFields)
            
            this.formatAllEventFields(newAllEventFields) // 事件类型&事件类型回执字段处理
            this.getExtraAdvanceSearchFields(originAllFields) // 获取额外的高级搜索字段
            this.buildColumns(); // 构建表格/选择列字段
            this.buildExportColumns(cardDetailList, evaluateConfig) // 构建导出字段
            this.findFastPageData();
            window.addEventListener('message', (event)=> {
              const {action, data} = event.data;
              if (action == 'shb.frame.fasterPage'){
                const {data:parseData, type} = data;
                if(type == `bbx-faster-${pageEventOrderList.type}`){
                  this.findFastPageData(parseData);
                }
              }
            });
            this.$nextTick(()=> {
              this.knowTableContainerHeight()
              let that_ = this;
              window.onresize = _.debounce(()=>{
                that_.knowTableContainerHeight()
              }, 500)
            })
          } else {
            this.columns = this.eventListFields // 初始化先给表格一个默认配置 骨架屏的作用
          }
        })
        .catch((err) => {
          console.error(err)
          this.columns = this.eventListFields
        }).finally(()=>{
          this.pageLoading = false;
        })
    },

    // 通过pageinfo获取事件类型&回执字段 并做处理
    formatAllEventFields(allEventFields) {
      const eventTemplateFields = []
      const eventTemplateReceiptFields = []
      allEventFields.forEach((field) => {
        field.group = field.tableName;
        field.label = field.displayName;
        field.field = field.fieldName;
        if(field.formType === 'date' || field.formType === 'datetime') {
          field.sortable = 'custom'
        }
        if(field.tableName === 'event') {
          eventTemplateFields.push(field)
        } else if(field.tableName === 'eventReceipt') {
          eventTemplateReceiptFields.push(field)
        }
      });
      this.$set(this, 'eventTemplateFields', eventTemplateFields || []);
      this.$set(this, 'eventTemplateReceiptFields', eventTemplateReceiptFields || []);
    },

    // 获取额外的高级搜索字段
    getExtraAdvanceSearchFields(allEventFields) {
      this.extraAdvanceFields = allEventFields.filter(field => {
        return field.isSearch == 1 && field.isSystem == 0
      })
    },

    // 构建列表项
    async buildColumns() {
      // 获取缓存在本地的选择列配置
      const localStorageData = await this.getLocalStorageData();
      const columnStatus = localStorageData.columnStatus || [];

      const localColumns = columnStatus
        .map((i) => (typeof i == 'string' ? { field: i, show: true } : i))
        .reduce((acc, col, currentIndex) => {
          acc[col.field] = {
            field: col,
            index: currentIndex,
          }
          return acc
        }, {});

      let eventListFields = this.eventListFields // 本地默认的表格项字段
      const { evaluateConfig={} } = this.initData

      if(this.customerSatisfaction) {
        if(this.satisfactionFields.length > 0 ) {
          eventListFields = eventListFields.concat(this.satisfactionFields)
        }
      }else {
        if(evaluateConfig.useStarEvaluate) { // 如果有服务标签等 构建额外的服务评价列表项
          eventListFields = eventListFields.concat(this.buildExtraEvaluateColumns())
        }
      }

      let fields = eventListFields.concat(this.eventTypeFilterFields); // 拼接不同【事件类型】对应的表格项字段

      if (Array.isArray(columnStatus) && columnStatus.length > 0) { // 有本地缓存--列表排序
        fields = this.buildSortFields(fields, localColumns)
      }

      const columns =  fields.map((col) => { // 选择列配置 是否勾选（显示）&宽度
        let show = col.show;
        let width = col.width;
        let localField = localColumns[col.field]?.field || null;
        let fixLeft = localField?.fixLeft || null;
        if (null != localField) {
          if (localField.width) {
            width = typeof localField.width == 'number'
              ? `${localField.width}px`
              : localField.width;
          }
          show = localField.show !== false;
        }

        col.show = show;
        col.width = width;
        col.minWidth = col.width || 150;
        col.type = 'column';
        col['fixLeft'] = fixLeft && 'left'
        return col;
      }).filter(f => f.formType !== 'attachment' && f.formType !== 'separator' && f.formType !== 'info' && f.formType !== 'autograph');;

      this.columns = []
      this.$nextTick(() => {
        this.$set(this, 'columns', columns.slice())
      })
    },
    
    // 选择列排序
    buildSortFields(originFields = [], fieldsMap = {}) {
      let fields = [];
      let unsortedFields = []

      originFields.forEach(originField => {
        let { fieldName } = originField
        let field = fieldsMap[fieldName]

        if (field) {
          let { index } = field
          fields[index] = originField
        } else {
          unsortedFields.push(originField)
        }
      })

      return fields.concat(unsortedFields)
    },

    /**
     * @description: 如果有evaluateConfig.useStarEvaluate 构建额外的列表项
     * @return {Array} extraColumns 
     */
    buildExtraEvaluateColumns() {
      const { evaluateConfig={} } = this.initData
      const extraColumns = evaluateConfig.starEvaluates.map((starEvaluate, index) => {
        const field = {
          fieldName: `starEvaluate${index+1}`,
          displayName: starEvaluate,
          renderCell: (h, col, row) => {
            const evaluateText = row.evaluate ? row.evaluate[`starEvaluate${index+1}`] : ''
            return (<div>{evaluateText}</div>)
          },
          formType: 'text',
          setting:  {},
          isSystem: 1,
          isNull: 1,
          isSearch: 1,
          orderId: 1,
          show: true,
          tableName: 'event',
          visable: true
        }
        return formatColumn(field); 
      })
      return extraColumns
    },

    /**
     * @description: 构建导出项
     * @param {Array} cardDetailList 附加组件
     * @param {Object} evaluateConfig 评价信息
     * @return {*}
     */
    buildExportColumns(cardDetailList, evaluateConfig) {
      // 事件信息
      const eventInfo = {
        label: this.$t('event.eventOrderList.text10'),
        value: 'eventChecked', // 本应该为eventChecked or eventReceiptChecked 但是批量导出组件对多行数据的判断写死了，暂时先这么写
        columns: this.formatExportEventInfo(false),
      }
      // 完成回执信息
      const eventReceiptInfo = {
        label: this.$t('event.eventOrderList.text11'),
        value: 'eventReceiptChecked',
        columns: this.formatExportEventInfo(true),
      }
      // 附加组件
      const cardDetailInfo = this.formatExportCardDetailInfo(cardDetailList);
      // 系统信息
      const systemInfo = {
        label: this.$t('common.task.TaskExportGroupTextEnum.system'),
        value: 'systemChecked',
        columns: getExportSystemInfo().map(item => {
            item.export = true
            item.label = item.displayName
            return item
          })
      }
      // 评价信息
      const evaluateInfo = {
        label: this.$t('common.form.fieldGroupName.customerSatisfaction'),
        value: 'evaluateChecked',
        columns: this.formatExportEvaluteInfo(evaluateConfig),
      }
      this.exportColumnList = [eventInfo, eventReceiptInfo, ...cardDetailInfo, systemInfo, evaluateInfo].filter(item => {
        return item.columns && item.columns.length > 0
      })
      // console.log("exportColumnList", JSON.stringify(this.exportColumnList))
    },

    /**
     * @description: 处理导出--事件信息&回执信息
     * @param {Boolean} isReceipt 是否回执
     */
    formatExportEventInfo(isReceipt) {
      let eventInfo = []
      const info = isReceipt ? this.eventTemplateReceiptFields : this.eventTemplateFields
      eventInfo = info.filter(item => {
        return item.formType !== 'attachment'&& item.formType !== 'separator' && item.formType !== 'info' && item.formType !== 'autograph'
      })
      if(!isReceipt) { // 如果是事件信息
        const fullEventInfo = []
        eventInfo.forEach((item, index) => {
          fullEventInfo.push(item)
          if(item.fieldName=='eventNo') {
            fullEventInfo.push({
              'fieldName': 'templateName',
              'displayName': this.$t('customer.detail.customerEventTable.table.label.templateId')
            })
          }
          if (item.fieldName=='customer') {
            const customerOption = item?.setting?.customerOption || {}
            const customerArr = [
              {
                fieldName: 'customerLinkman',
                displayName: this.$t('common.base.contact'),
                show: customerOption.linkman

              },
              {
                fieldName: 'customerPhone',
                displayName: this.$t('common.base.phone'),
                show: customerOption.linkman
              },
              {
                fieldName: 'customerAddress',
                displayName: this.$t('common.base.locationMap.customerAddress'),
                show: customerOption.address
              },
              {
                fieldName: 'product',
                displayName: this.$t('common.base.product'),
                formType : 'select',
                show: customerOption.product,
                setting: {
                  isMulti: true
                }
              }
            ]
            customerArr.forEach(cItem => {
              fullEventInfo.push(cItem)
            })
          }
        })
        eventInfo = fullEventInfo.filter(item=> item.show !== false)
      }
      eventInfo.map(item => {
        item.exportAlias = item.fieldName
        item.label = item.displayName
        item.export = true
        return item
      })
      return eventInfo
    },

    // 处理导出--附加组件
    formatExportCardDetailInfo(cardDetailList) {
      let list = cardDetailList.map((item, index) => {
        if (item.canRead) {
          let columns = []
          item.fields = [
              ...item.fields, 
              ...[
                { displayName: this.$t('common.base.operator'), fieldName: `cu_${item.cardId}`},
                {displayName: this.$t('common.label.operationTime'), fieldName: `ct_${item.cardId}`}
              ]
            ]
          columns = item.fields.map((v, i) => {
            return {
              export: item.canRead,
              label: v.displayName,
              exportAlias: v.fieldName,
              ...v,
            };
          }).filter(v => {
            return v.formType !== 'attachment'&& v.formType !== 'separator' && v.formType !== 'info' && v.formType !== 'autograph'
          });
          return {
            value: `annexChecked${index}`,
            label: this.$t('event.eventOrderList.text13', {data1: item.cardName}),
            inputType: item.inputType,
            columns,
          };
        }
      }).filter(item => {
        if (item) {
          return item
        }
      })
      return list
    },

    // 处理导出--评价信息
    formatExportEvaluteInfo(evaluateConfig) {
      // 满意度开启的导出数据去满意度处理
      let satisfactionFields = [];
      if(this.customerSatisfaction) {
        this.satisfactionFields.map(field => {
          field.export = true
          field.label = field.displayName
          field.exportAlias = field.fieldName
          satisfactionFields.push(field) 
        })

        return satisfactionFields;
      }

      let starEvaluates = []
      if(evaluateConfig.useStarEvaluate) {
        starEvaluates = _.cloneDeep(evaluateConfig.starEvaluates)
      }
      // TODO: 这里也一样，下面有判断
      if (evaluateConfig.useTagEvaluate) {
        starEvaluates.push(this.$t('common.customer.questionnaire.serviceTag'))
      }
      
      const configInfo = starEvaluates.map((item,index) => {
        return {
          exportAlias: item === this.$t('common.customer.questionnaire.serviceTag') ? 'tagEvaluates' : `starEvaluate${index+1}`,
          label: item,
          export: true
        }
      })
      return configInfo
    },

    // 打开选择列
    showAdvancedSetting() {
      this.$refs.advanced.open(this.columns, this.currentEventType);
    },
    
     /**
     * @description 表头更改
     */
    headerDragend (newWidth, oldWidth, column, event) {
      let data = this.columns
        .map((item) => {
          if (item.fieldName === column.property) {
            item.width = column.width;
          }
          return item;
        })
        .map((item) => {
          return {
            field: item.field,
            show: item.show,
            width: item.width,
          };
        });
      this.modifyColumnStatus({ type: 'column', data });
    },

     /**
     * @description 修改选择列设置
     * @param {Object} event 事件对象
     */
    modifyColumnStatus (event) {
      let columns = event.data || [],
        colMap = columns.reduce(
          (acc, col) => (acc[col.field] = col) && acc,
          {}
        );
      this.columns.forEach((col) => {
        let newCol = colMap[col.field];
        if (null != newCol) {
          this.$set(col, 'show', newCol.show);
          this.$set(col, 'width', newCol.width);
        }
      });

      this.saveColumnStatusToStorage();
    },

    // 保存选择列配置
    saveColumnStatus(event) {
      let columns = event.data || []

      this.columns = []
      this.$nextTick(() => {
        this.$set(this, 'columns', columns.slice());
        this.saveColumnStatusToStorage()
      })
      this.$message.success(this.$t('common.base.saveSuccess'));
    },
    
    // 保存选择列配置到本地
    saveColumnStatusToStorage() {
      const localStorageData = this.getLocalStorageData();
      let columnsStatus = null

      // 判断是否存储选择列
      const columnsList = this.columns.map(c => ({
        field: c.field,
        show: c.show,
        width: c.width,
        fixLeft: c.fixLeft
      }));

      if (localStorageData.columnStatus) {
        localStorageData.columnStatus = columnsList;
        columnsStatus = localStorageData.columnStatus;
      } else {
        columnsStatus = columnsList;
      }

      this.saveDataToStorage('columnStatus', columnsStatus);
    },

    /**
     * @description 获取行的key
     * @param {Object} row 行数据
     * @return {String} key
     */
    getRowKey(row = {}) {
      return row.id;
    },

    // 清空选择框
    toggleClearSelection() {
      this.multipleSelection = [];
      this.$refs.table.clearSelection();
    },

    // 表格选择操作
    handleSelection(selection) {
      this.multipleSelection = selection;
      this.$nextTick(()=>{
        this.knowTableContainerHeight();
      })
    },

    // 排序变化
    sortChange(option) {
      const {column, order, prop} = option;
      const sortedField = this.columns.filter((item) => item.fieldName === prop)[0] || {};
      if(column === null) {
        this.searchParams.orderDetail = {};
      }else{
        this.searchParams.orderDetail = {
          column: sortedField.sortName || sortedField.fieldName,
          sequence: order === 'ascending' ? 'ASC' : 'DESC',
          type: sortedField.dataType || sortedField.formType,
          isSystem: sortedField.isSystem,
        }
      }
      this.search();
    },

    // 页码跳转
    jump(pageNum) {
      this.searchParams.pageNum = pageNum;
      this.eventPage.list = [];
      this.search();
    },

    // 页大小改变
    handleSizeChange(pageSize) {
      this.saveDataToStorage(EVENT_ORDER_PAGE_SIZE_KEY, pageSize);
      this.searchParams.pageSize = pageSize;
      this.searchParams.pageNum = 1;
      this.search();
    },

    // 设置高级搜索展示列数
    setAdvanceSearchColumn(command) {
      this.columnNum = Number(command);
    },

    // 构建导出参数
    buildExportParams(checkedMap, ids, exportOneRow) {
      const {
        eventReceiptChecked,
        systemChecked,
        eventChecked,
        evaluateChecked
      } = checkedMap

      let exportAll = !ids || !ids.length;

      const exportSearchModel = { 
        ...this.buildSearchParams(),
        exportTotal: exportAll ? this.eventPage.total : this.selectedIds.length,
      }

      let params = {
        isOrder: true,
        typeId: this.currentEventType.id,
        exportSearchModel: JSON.stringify(exportSearchModel)
      };

      // 附加
      let cardFieldChecked = []
      for (let key in checkedMap) {
        if (key.indexOf('annexChecked') !== -1) {
          cardFieldChecked = [...cardFieldChecked, ...checkedMap[key]]
        }
      }
      cardFieldChecked = cardFieldChecked.filter(item => {return item})
      /** ********************* *********************/
      // 事件信息
      let export_checked = this.exportData('eventChecked', eventChecked)
      // 回执信息
      let export_receipt = this.exportData('eventReceiptChecked', eventReceiptChecked)
      // 系统信息
      let export_sys = this.exportData('systemChecked', systemChecked)
      // 评价信息
      let export_evaluate = this.exportData('evaluateChecked', evaluateChecked)
      // 附加信息
      let export_card_field = cardFieldChecked.length ? this.exportData(3, cardFieldChecked) : cardFieldChecked

      params['exportOneRow'] = exportOneRow
      params['data'] = exportAll ? '' : this.selectedIds.join(',');
      params['receiptChecked'] = export_receipt.join(',');
      params['sysChecked'] = export_sys
        .map((item) => {
          return item;
        })
        .join(',');
      params['evaluateChecked'] = export_evaluate
        .map((item) => {
          return item;
        })
        .join(',');
      params['checked'] = export_checked
        .map((item) => {
          if (item === 'product') {
            item = 'product,productSN'
          }
          return item;
        })
        .join(',');
      params['cardFieldChecked'] = export_card_field.filter(item => {
        return item
      }).join(',')
      return params;
    },

    /**
     * 导出数据
     */
    exportData(type, list = []) {
      const export_list = this.exportColumnList
      if (type === 'cardFieldChecked') {
        let cardField = []
        export_list.filter((item, index) => {
          // 有待商榷
          return item.value !== 'eventChecked' && item.value !== 'eventReceiptChecked' && item.value!== 'systemChecked'
        }).forEach(v => {
          v.columns.forEach(item => {
            cardField.push(item)
          })
        })
        return cardField.map(v => {
          let bool = list.some(item => {
            if (v.exportAlias) {
              return v.exportAlias === item
            } 
            return v.fieldName === item
            
          })
          if (bool) {
            return v.exportAlias ? v.exportAlias : v.fieldName
          }
        }).filter(item => {
          return item
        })
      }

      let xlistColumns = []
      export_list.forEach((xlist, i) => {
        if(xlist.value === type) xlistColumns = xlist.columns
      })

      return xlistColumns.map(v => {
        let bool = list.some(item => {
          if (v.exportAlias) {
            return v.exportAlias === item
          } 
          return v.fieldName === item
          
        })
        if (bool) {
          return v.exportAlias ? v.exportAlias : v.fieldName
        }
      }).filter(item => {
        return item
      })
    },

    // 导出提示
    exportAlert(result, params = {}) {
      this.$notify({
        title: result.status === 0 ? this.$t('common.base.success') : this.$t('common.base.error'),
        message: result.message,
        type: result.status === 0 ? 'success' : 'error'
      });
    },

     /**
     * @description 检测导出条数
     * @return {String | null}
     */
    checkExportCount(ids, max) {
      let exportAll = !ids || ids.length == 0;
      return exportAll && this.eventPage.total > max
        ? this.$t('common.base.tip.exportMostTip')
        : null;
    },

    // 打开关闭订阅
    async toggleEventSubscribe() {
      let action = this.hasSub ? EventApi.eventUnSubscribe : EventApi.eventSubscribe;
      let tip = this.hasSub ? this.$t('common.base.tip.canceledSubscribeNotify') : this.$t('common.base.tip.subscribeNotify');
      try {
        let res = await action({module:'eventAllot'});
        if(res.status == 0){
          this.$message({
            message: tip,
            type: 'success'
          });
          this.hasSub = this.hasSub == 0 ? 1 : 0;
        }else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.error(error);
      }
    },

    // 获取本地localstorage
    getLocalStorageData() {
      const dataStr = storageGet(EVENT_LIST_KEY, '{}');
      return JSON.parse(dataStr);
    },

    // 保存数据到本地localstorage
    saveDataToStorage(key, value) {
      const data = this.getLocalStorageData();
      data[key] = value;
      storageSet(EVENT_LIST_KEY, JSON.stringify(data));
    },

    // 单独获取事件状态对应的数量
    async queryEventStatusNum() {
      const query = { "isOrderList" : true }
      const params = { "pageSize" : 10 }

      await EventApi.queryEventPageInfo(query, params)
        .then(res => {
          if(res.status == 0 && res.succ) {
            const {stateCount=[]} = res.data
            this.initEventStatusField(stateCount) // 处理事件状态对应数量
          }
        })
    },

    // 更新页面
    async refreshPage() {
      this.queryEventStatusNum()
      this.search()
    },

    /**
     * @description 获取显示最后一次更新记录
     * @param {Object} row 行数据
     */
    async fetchLastUpdateRecord(row) {
      // 存在历史更新记录
      if (row.lastUpdateRecord) {
        return console.warn(`Caused: ${row.taskNo} row have lastUpdateRecord`)
      }
      
      try {
        const result = await EventApi.getEventUpdateRecord({ eventId: row.id })
        const { succ, data } = result
        
        if (!succ) return

        this.eventPage.list.forEach(item => {
          if(item.id === row.id) {
            item.lastUpdateRecord = data
          }
        })

        // 重新渲染表格以显示提示
        const ElementBodyHtmlElement = this.$el.querySelector('.el-table__body-wrapper') || {}
        const ElementBodyHtmlElementScrollLeft = ElementBodyHtmlElement.scrollLeft
        const PageScrollTop = this.$refs.eventOrderPageRef.scrollTop
      
        // 更新key以重新更新渲染列表数据
        this.tableKey = randomString()

        this.$nextTick(() => {
          // 有横向滚动，记住上次位置，不然每次重新渲染都会回到开头
          this.$el.querySelector('.el-table__body-wrapper').scrollLeft = ElementBodyHtmlElementScrollLeft
          // 有纵向滚动，记住上次位置，不然每次重新渲染都会回到开头（但是task list没有写这个没有问题，有空看一下）
          this.$refs.eventOrderPageRef.scrollTop = PageScrollTop
        })
      
      } catch (error) {
        console.error(error)
      }
    },
    /**
     * @des 提供给快捷筛选视图的方法
     */
    fasterFilterList(keyObj){
      try {
        let arr_ = [];
        for(let key in keyObj){
          let value = keyObj[key]
          let parent = this.filterConfig.find(item=>item.name == key);
          let child = parent.content.find(item=>item.value == value);
          arr_.push(this.handleFilterClick(parent, child, false))
        }
        Promise.all(arr_).then(()=>{
          this.resetSearch();
        })
      } catch (error) {
        console.warn(error, 'fasterFilterList error try catch');
      }
    },
    /**
     * @des 查询是否有查询参数
     */
    findFastPageData(data){
      try {
        let parseData = sessionStorageGet(`bbx-faster-${pageEventOrderList.type}`);
        if(parseData){
          sessionStorageRemove(`bbx-faster-${pageEventOrderList.type}`);
        }
        if(!data && !parseData) return
        const {filterData} = data || JSON.parse(parseData);
        this.fasterFilterList(filterData);
      } catch (error) {
        console.warn(error, 'findFastPageData error try catch');
      }
    },

    /**
     * @des 获取列表当前的可滚动高度
     */
    knowTableContainerHeight(){
      let min = 440;
      try {
        let window_ = window.innerHeight;
        let header = this.$refs.tableHeaderContainer?.offsetHeight || 0;
        let do_ = this.$refs.tableDoContainer?.offsetHeight || 0;
        let footer = this.$refs.tableFooterContainer?.offsetHeight || 0;
        let selection = this.$refs.BaseSelectionBarComponent?.offsetHeight || 0;
        selection = selection ? selection + 8 : selection;
        min = window_ - header * 1 - do_ * 1 - footer * 1 - selection * 1 - 24 - 8 - 32;
        console.log(window_, header, do_, footer, selection, 'window_, header, do_, footer, selection');
        // console.log(pxArray, 'pxArray')
        min = min > 440 ? min : 440;
      } catch (error) {
        console.warn(error, 'error try catch');
      }
      this.$set(this, 'tableContainerHeight', `${min}px`)
    },
    changePackUp(){
      this.packUp = !this.packUp;
      this.$nextTick(()=>{
        this.knowTableContainerHeight()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.event-list {
  .search-input{
    width: 440px ;
  }
  
  >div {
    border-radius: 4px;
  }

  .filter-wrapper {
    .searh-input-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #F2F2F2;
      .advanced-search-btn{
        @include fontColor;
      }
    }
    .filter-tab {
      &__item {
        display: flex;
        flex-wrap: wrap;
        line-height: 32px;
        border-bottom: 1px solid #F2F2F2;
        &:last-child {
          border-bottom: 0;
        }
      }
      &__label {
        background: #F5F5F5;
        width: 108px;
        text-align: center;
        color: #666;
      }
      &__content {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        .content-item {
          display: inline-block;
          width: 130px;
          overflow: hidden;
          padding-left: 10px;
          cursor: pointer;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: grey;
          &:hover {
            color: #333;
          }
          .content-item-label.actived {
            color: $color-primary-light-6 !important;
          }
        }
      }
    }
  }

  .common-list-view__v2 {
    padding-bottom:0;
    .operate-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      >div {
        display: flex;
        align-items: center;
        .icon-ding-yue {
          font-size: 14px;
          &.actived {
            color: $color-primary-light-6;
          }
        }
      }
    }
  }
}
</style>